<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客发布</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="../../static/css/my.css">
    <link rel="stylesheet" href="../../static/lib/editormd/css/editormd.min.css">
    <style>
        body {
            width: 100%;
            height: 100vh;
            background-color:#000;
            background-image: radial-gradient(circle at top right, rgba(15, 7, 14, 0.83), #0f070e),
            radial-gradient(circle at 20% 80%, rgba(15, 7, 14, 0.67), #0f070e);
        }
        canvas {
            position: fixed;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<canvas width="700" height="634"></canvas>
<!--特效 script-->
<script>
    const STAR_COUNT = ( window.innerWidth + window.innerHeight ) / 8,
        STAR_SIZE = 3,
        STAR_MIN_SCALE = 0.2,
        OVERFLOW_THRESHOLD = 50;

    const canvas = document.querySelector( 'canvas' ),
        context = canvas.getContext( '2d' );

    let scale = 1, // device pixel ratio
        width,
        height;

    let stars = [];

    let pointerX,
        pointerY;

    let velocity = { x: 0, y: 0, tx: 0, ty: 0, z: 0.0005 };

    let touchInput = false;

    generate();
    resize();
    step();

    window.onresize = resize;
    canvas.onmousemove = onMouseMove;
    canvas.ontouchmove = onTouchMove;
    canvas.ontouchend = onMouseLeave;
    document.onmouseleave = onMouseLeave;

    function generate() {

        for( let i = 0; i < STAR_COUNT; i++ ) {
            stars.push({
                x: 0,
                y: 0,
                z: STAR_MIN_SCALE + Math.random() * ( 1 - STAR_MIN_SCALE )
            });
        }

    }

    function placeStar( star ) {

        star.x = Math.random() * width;
        star.y = Math.random() * height;

    }

    function recycleStar( star ) {

        let direction = 'z';

        let vx = Math.abs( velocity.x ),
            vy = Math.abs( velocity.y );

        if( vx > 1 || vy > 1 ) {
            let axis;

            if( vx > vy ) {
                axis = Math.random() < vx / ( vx + vy ) ? 'h' : 'v';
            }
            else {
                axis = Math.random() < vy / ( vx + vy ) ? 'v' : 'h';
            }

            if( axis === 'h' ) {
                direction = velocity.x > 0 ? 'l' : 'r';
            }
            else {
                direction = velocity.y > 0 ? 't' : 'b';
            }
        }

        star.z = STAR_MIN_SCALE + Math.random() * ( 1 - STAR_MIN_SCALE );

        if( direction === 'z' ) {
            star.z = 0.1;
            star.x = Math.random() * width;
            star.y = Math.random() * height;
        }
        else if( direction === 'l' ) {
            star.x = -OVERFLOW_THRESHOLD;
            star.y = height * Math.random();
        }
        else if( direction === 'r' ) {
            star.x = width + OVERFLOW_THRESHOLD;
            star.y = height * Math.random();
        }
        else if( direction === 't' ) {
            star.x = width * Math.random();
            star.y = -OVERFLOW_THRESHOLD;
        }
        else if( direction === 'b' ) {
            star.x = width * Math.random();
            star.y = height + OVERFLOW_THRESHOLD;
        }

    }

    function resize() {

        scale = window.devicePixelRatio || 1;

        width = window.innerWidth * scale;
        height = window.innerHeight * scale;

        canvas.width = width;
        canvas.height = height;

        stars.forEach( placeStar );

    }

    function step() {

        context.clearRect( 0, 0, width, height );

        update();
        render();

        requestAnimationFrame( step );

    }

    function update() {

        velocity.tx *= 0.96;
        velocity.ty *= 0.96;

        velocity.x += ( velocity.tx - velocity.x ) * 0.8;
        velocity.y += ( velocity.ty - velocity.y ) * 0.8;

        stars.forEach( ( star ) => {

            star.x += velocity.x * star.z;
            star.y += velocity.y * star.z;

            star.x += ( star.x - width/2 ) * velocity.z * star.z;
            star.y += ( star.y - height/2 ) * velocity.z * star.z;
            star.z += velocity.z;

            // recycle when out of bounds
            if( star.x < -OVERFLOW_THRESHOLD || star.x > width + OVERFLOW_THRESHOLD || star.y < -OVERFLOW_THRESHOLD || star.y > height + OVERFLOW_THRESHOLD ) {
                recycleStar( star );
            }

        } );

    }

    function render() {

        stars.forEach( ( star ) => {

            context.beginPath();
            context.lineCap = 'round';
            context.lineWidth = STAR_SIZE * star.z * scale;
            context.strokeStyle = 'rgba(255,255,255,'+(0.5 + 0.5*Math.random())+')';

            context.beginPath();
            context.moveTo( star.x, star.y );

            var tailX = velocity.x * 2,
                tailY = velocity.y * 2;

            // stroke() wont work on an invisible line
            if( Math.abs( tailX ) < 0.1 ) tailX = 0.5;
            if( Math.abs( tailY ) < 0.1 ) tailY = 0.5;

            context.lineTo( star.x + tailX, star.y + tailY );

            context.stroke();

        } );

    }

    function movePointer( x, y ) {

        if( typeof pointerX === 'number' && typeof pointerY === 'number' ) {

            let ox = x - pointerX,
                oy = y - pointerY;

            velocity.tx = velocity.tx + ( ox / 8*scale ) * ( touchInput ? 1 : -1 );
            velocity.ty = velocity.ty + ( oy / 8*scale ) * ( touchInput ? 1 : -1 );

        }

        pointerX = x;
        pointerY = y;

    }

    function onMouseMove( event ) {

        touchInput = false;

        movePointer( event.clientX, event.clientY );

    }

    function onTouchMove( event ) {

        touchInput = true;

        movePointer( event.touches[0].clientX, event.touches[0].clientY, true );

        event.preventDefault();

    }

    function onMouseLeave() {

        pointerX = null;
        pointerY = null;

    }
</script>



<!--导航-->
<nav class="ui inverted attached segment m-padded-tb-mini">
    <div class="ui container">
        <!--手机端(页面缩小)stackable可堆叠   mobile reversed -->
        <div class="ui inverted aligned secondary stackable menu">
            <a class="ui m-text-highlight teal header item">管理后台</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="home icon"></i> 博客</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i> 分类</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="tags icon "></i> 标签</a>
            <div class="right m-mobile-hide menu">
                <div class="ui dropdown item">
                    <div class="text">
                        <img src="../../static/images/headpage.gif" class="ui avatar image m-margin-tb-right">槐佳辉
                    </div>
                    <i class="dropdown icon"></i>
                    <div class="menu">
                            <img src="../../static/images/headpage.gif" class="ui avator image">槐佳辉
                            <a href="#" class="item">注销</a>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top">
        <i class="sidebar icon m-mobile-show"></i>
    </a>
</nav>

<div class="ui inverted attached menu">
    <div class="ui container">
        <div class="ui right menu">
            <a href="#" class="blue active  item">博客发布</a>
            <a href="#" class="item m-text-color-black">博客管理</a>
        </div>
    </div>
</div>

<!--中间内容-->
<div class="ui m-container-small inverted m-padded-tb-large">
    <div class="ui container">
     <form action="#" method="post" class="ui form">
         <!--标题加类型-->
         <div class="required field">
             <div class="ui left labeled input">
                 <!--compact 适应文本来选择下拉框大小-->
                 <div class="ui selection compact teal basic label dropdown">
                     <input type="hidden" value="原创">
                     <i class="dropdown icon"></i>
                     <div class="default text">原创</div>
                     <div class="menu">
                         <div class="item" data-value="原创">原创</div>
                         <div class="item" data-value="转载">转载</div>
                         <div class="item" data-value="抄袭">抄袭</div>
                     </div>
                 </div>
                 <input type="text" name="title" class="ui text" placeholder="标题">
             </div>
         </div>
         <!--Makrdown 集成-->
         <div class="field">
             <!--z-index 覆盖级别1 级-->
             <div id="md-content" style="z-index: 1!important;">
             <textarea placeholder="博客内容" name="content" style="display: none">
                 [TOC]

#### Disabled options

- TeX (Based on KaTeX);
- Emoji;
- Task lists;
- HTML tags decode;
- Flowchart and Sequence Diagram;
             </textarea>

             </div>
         </div>
         <!--fluid盛满-->
         <div class="two fields">
             <div class="field">
                 <!--action连接紧密-->
                 <div class="ui left labeled action input">
                     <label class="ui compact teal label">分类</label>
                     <div class="ui fluid selection dropdown">
                         <input type="hidden" name="type">
                         <i class="dropdown icon"></i>
                         <div class="default text">分类</div>
                         <div class="menu">
                             <div class="item" data-value="1">错误日志</div>
                             <div class="item" data-value="2">开发者手册</div>
                         </div>
                     </div>
                 </div>
             </div>
             <div class="field">
                 <!--action连接紧密-->
                 <div class="ui left labeled action input">
                     <label class="ui compact teal label">标签</label>
                     <!--fluid盛满一半的field-->
                     <div class="ui fluid multiple search selection dropdown">
                         <input type="hidden" name="tag">
                         <i class="dropdown icon"></i>
                         <div class="default text">标签</div>
                         <div class="menu">
                             <div class="item" data-value="1">JAVA</div>
                             <div class="item" data-value="2">MySQL</div>
                             <div class="item" data-value="3">HTML</div>
                             <div class="item" data-value="4">React</div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
         <div class="field">
             <div class="ui left labeled input">
                 <label class="ui teal label">首图</label>
                 <input type="text" name="indexPicture" placeholder="首图引用地址">
             </div>
         </div>
         <div class="ui attached segment">
             <div class="inline fields">
                 <div class="field">
                     <div class="ui checkbox">
                         <input type="checkbox" id="recommend" checked name="commend" class="hidden">
                         <label for="recommend">推荐</label>
                     </div>
                 </div>
                 <div class="field">
                     <div class="ui checkbox">
                         <input type="checkbox" id="shareInfo" name="shareInfo" class="hidden">
                         <label for="shareInfo">转载声明</label>
                     </div>
                 </div>
                 <div class="field">
                     <div class="ui checkbox">
                         <input type="checkbox" id="appreciation" name="appreciation" class="hidden">
                         <label for="appreciation">赞赏</label>
                     </div>
                 </div>
                 <div class="field">
                     <div class="ui checkbox">
                         <input type="checkbox" id="comment" name="comment" class="hidden">
                         <label for="comment">留言</label>
                     </div>
                 </div>
             </div>
         </div>

         <div class="ui bottom attached right aligned segment">
             <div class="ui m-margin-tb-right compact error message"></div>
             <button type="button" class="ui button" onclick="window.history.go(-1)">返回</button>
             <button class="ui  button">保存</button>
             <button class="ui teal button">发布</button>
         </div>
     </form>
    </div>
</div>
<!--底部footer-->
<FOOTER class="ui inverted vertical segment m-padded-tb-massive">
    <div class="ui center aligned container">
        <div class="ui divided stackable inverted grid">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="../../static/images/wechat.jpg" class="ui rounded image" alt="" style="width: 110px">
                    </div>
                </div>
            </div>
            <div class="four wide column">
                <h4 class="ui inverted header m-opacity-min">最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">用户故事：</a>
                    <a href="#" class="item">用户故事：</a>
                    <a href="#" class="item">用户故事：</a>

                </div>
            </div>
            <div class="four wide column">
                <h4 class="ui inverted header m-opacity-min">联系我</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">Email: 1748756566@qq.com</a>
                    <a href="#" class="item">QQ: 1748756566</a>
                    <a href="#" class="item">微信： BXY4543</a>

                </div>
            </div>
            <div class="five wide column">
                <h4 class="ui inverted header m-opacity-min">介绍</h4>
                <p class="m-text-thin m-text-spaced m-opacity-mini">我的个人博客 ： hello，world</p>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
        <p class="m-text-thin m-text-spaced m-opacity-mini">Copyright 2019-2020 MyBlog</p>
    </div>

</FOOTER>


<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="../../static/lib/editormd/editormd.min.js"></script>
<script>

    /*初始化Markdown*/
    var contentEditor;
    $(function() {
        contentEditor = editormd("md-content", {
            width   : "100%",
            height  : 640,
            syncScrolling : "single",
            path    : "../lib/editormd/lib/"
        });
    });

    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');//如有这个Class则去除，没有则加入
    });
    $('#payButton').popup({
        popup: $('.payQR.popup'),
        on: 'click',
        position: 'bottom center'
    });
    $('.ui.dropdown').dropdown();
    $('.ui.form').form({
        fields: {
            title : {
                identifier: 'title',
                rules: [{
                    type: 'empty',
                    prompt: '标题:请输入标题'
                }]
            }
        }
    });

</script>
</body>
</html>